<template>
  <span style="margin-left: 10px; margin-top: 5px">各科目试卷数量</span>
  <div id="echarts" style="width: 100%; height: 70vh"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
import testResult from "@/api/questionItem/testResult";
import { useRouter } from "vue-router";

const router = useRouter();

onMounted(async () => {
  const myCharts = echarts.init(document.getElementById("echarts"));
  myCharts.clear(); // 清空 echarts 实例
  const res = await testResult.anglysisNumber();
  let option = {
    series: [
      {
        type: "pie",
        data: res.data,
        label: {
          show: true,
          formatter: "{b}: {c}", // 显示名称和数值
        },
      },
    ],
  };
  myCharts.setOption(option);
  // 添加点击事件监听器
  myCharts.on("click", function (params) {
    router.push({
      path: "/test/echarts/subject",
      query: {
        id: params.data.id,
        name: params.data.name,
      },
    });
  });
});
</script>
